<template>
	<view class="">
		<navbar :back="true" title="服务中心" color="#fff" leftIconColor="#fff"></navbar>
		<mswiper :list="slideImage" height="375rpx" :nextMargin="0" :previousMargin="0" :radius="0" />
		<view style="position: fixed;bottom: 20%;right:0;">
			<image src="https://cdn.yowswl.com/image/admin/2023/11/16/f2bb277a881e4743a3fda04bf7c28209ab9m03ayly.png" mode="widthFix" style="width: 160rpx;" @click="isshow=true"></image>
		</view>
		<view style="background-color: #fff;display: flex;justify-content: space-between;align-items: center;padding: 40rpx;">
			<!-- <swiperMenus :list="list" :size="4" /> -->
			<view v-for="(item,index) in list" :key="index" style="text-align: center;" @click="getid(item)">
				<image :src="item.image" mode="" style="width: 80rpx;height:80rpx;display: inline-block;"></image>
				<view style="font-size: 22rpx;padding:10rpx 20rpx;border-radius: 20rpx;" :class="item.id==idx?'sel':''">{{item.title}}</view>
			</view>
		</view>
<!-- 		<view style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;">
			<view style="font-size: 26rpx;color:#9c9c9c;">没有找到想要的?</view>
			<view style="color: #7b8aaa;padding: 20rpx;background-color: #efefef;border-radius: 10rpx;font-size: 28rpx;" >咨询平台客服</view>
		</view> -->
		<view style="padding:0 20rpx 20rpx 20rpx;">
			<view  v-if="shopList.length!=0">
				 <view v-for="(item,index) in shopList" :key="index" style="margin-bottom: 20rpx;background-color: #fff;padding: 20rpx;border-radius: 20rpx;box-shadow: -4rpx 2rpx 40rpx 12rpx #eee;" @click="godel(item.id)">
				 	<view style="display: flex;">
				 	   <image :src="item.image" style="width:192rpx;display: block;height: 192rpx;border-radius: 12rpx;"></image>
				 	   <view style="margin-left:20rpx;width: 67%;">
				 		   <view style="color: #000;font-size: 28rpx;width: 412rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;margin-bottom: 10rpx;">{{item.name}}</view>
				 	     <view style="font-size:24rpx;margin-bottom:10rpx;">添加时间 : {{item.addTime}}</view>
				 		  <view style="font-size:24rpx;margin-bottom:10rpx;display: flex;align-items: center;">
							  <view class="">服务商名称:</view>
							  <view style="display: flex;align-items: center;margin-left: 20rpx;">
								  <image :src="item.icon" mode="widthFix" style="width: 60rpx;display: block;margin-right: 10rpx;"></image>
								  <view class="">{{item.serverName}}</view>
							  </view>
						  </view>
						   <view style="font-size:24rpx;width:100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">简介 : {{item.msg}}</view>
				 	   </view>
				 	  
				 	</view>
				 </view>
			</view>
			<view class="" v-else>
				<u-empty
				        mode="list"
				        icon="http://cdn.uviewui.com/uview/empty/list.png"
						:text='`暂无${title}`'
				>
				</u-empty>
			</view>
		</view>
		<u-popup  height="100%" :show="isshow" mode='center' round='20' :zIdx='0' :zIndex='0' :closeOnClickOverlay='true' @close='isshow=false' :safeAreaInsetBottom='false'>
			<view style="width:400rpx;padding: 126rpx 60rpx 30rpx 60rpx;position: relative;">
				<view style='position: absolute;top: -100rpx;left: 32%;'>
					<image src="https://cdn.yowswl.com/image/admin/2023/11/16/f0eddc5d91114e428eb64bf13c7f115bgk5ljxicp6.png" mode="widthFix" style="width: 200rpx;"></image>
				</view>
				<view style="text-align: center;">
					<image src="https://cdn.yowswl.com/image/admin/2023/11/16/bc52799783504b84b7495a432eb903d09qwsyqfw65.png" mode="widthFix" style="width: 240rpx;display: inline-block;"></image>
				</view>
				<view style="font-size: 22rpx;color: #adadad;text-align: center;margin: 10rpx 0;">长按保存二维码</view>
				<image :show-menu-by-longpress="true" :src="img" mode="widthFix" style="width: 100%;"
					@longtap="previewImage"></image>
			</view>
		</u-popup>
		<!-- <image :src="" mode=""></image> -->
	</view>
</template>

<script>
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import {
		getStoreList
	} from "@/api/store.js"
	import navbar from '@/components/baseNavbar.vue'
	import swiperMenus from '@/components/swiperMenus.vue'
	import mswiper from '@/components/swiperList.vue'
	export default{
		components:{
			navbar,
			swiperMenus,
			mswiper
		},
		data(){
			return{
				list:[],
				slideImage:[],
				isshow:false,
				img:'',
				idx:1,
				shopList:[],
				loadend: false,
				loading: false,
				title:"",
				page: {
					page: 1,
					limit: 10,
					cateId: '',
					name:''
				},
			}
		},
		onLoad(){
			getGroupValue('server_center').then(res=>{
				this.list = res.data
				this.list.forEach(item=>{
					item.id = this.idx++
				})
				this.idx = this.list[0].id
				this.page.cateId=this.list[0].id
				this.title = this.list[0].title
				this.resetList()
				console.log("11111111111",this.list);
			})
			getConfig('customer_qrcode_image').then(res => {
				this.img = res.data.value
			})
			getGroupValue('server_silde_image').then(res=>{
				this.slideImage = res.data
			})
			
		},
		methods:{
			godel(id){
				uni.navigateTo({
					url:"/pages/sub/store/serdet?id="+id
				})
			},
			getid(item){
				this.idx = item.id
				this.title = item.title
				this.page.cateId=item.id
				this.resetList()
			},
			resetList(callback) {
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.shopList= []
				this.getList(callback)
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				let tlist =[]
				getStoreList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'shopList', this.shopList.concat(res.data.list));
					if(this.shopList.length==0){
						uni.showToast({
							title:'敬请期待',
							icon:'none'
						})
					}
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: this.img,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
		height: 100%;
	}
	.sel{
		background-color: #ebf1fe;
	}
</style>